<template>
  <div class="netImg">
    <div class="hello">
      <div
        ref="rdivref"
        v-for="(item,index) in movList[0].movName"
        style="width:320px;height:210px;overflow:hidden;border-radius: 10px;margin: 0 auto;margin-top: 30px;text-align: center;"
        :key="item.index"
      >
        <video
          @click="playVideo()"
          ref="rvideo"
          class="cvideo"
          id="vjs_video_3_html5_api"
          :src="movPath+item.name"
          :poster="movPath+item.pic"
          controls="controls"
          width="320px"
          height="180px"
          playsinline="playsinline"
          webkit-playsinline="true"
          x5-playsinline="true"
          x5-video-player-type="h5"
          x5-video-player-fullscreen="false"
          tabindex="-1"
          preload="auto"
        ></video>
        <div
          @click="isClick && uploadMov(item.name,index)"
          style="color:#409EFF;font-size:16px"
        >点我上传视频</div>
        <div ref="output"></div>
      </div>
      <div class="divFooter">
        <ul class="footer" id="menu">
          <li
            :index="index"
            v-for="(item, index) in listTxt"
            @click="clickMenuLi(index)"
            :key="item"
          >{{item}}</li>
        </ul>
      </div>
      <div
        class="loadingTxt"
        v-loading="loading2"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
      ></div>
    </div>
    <fireComponents ref="childName" :fatherImgSrc="fatherImgSrc"></fireComponents>
  </div>
</template>

<script>
import { method } from '../../assets/js/alert'
import fireComponents from '@/components/newComp/fireComponents'
export default {
  name: 'netImg',
  data () {
    return {
      movPath: 'api/',
      movList: [
        {
          movName: []
        }
      ],
      movList2: [],
      index: '',
      listTxt: ['左转90', '右转90', '水平翻转', '垂直翻转'],
      loading2: true,
      video: null,
      output: null,
      fatherImgSrc: '',
      isClick: true
    }
  },
  created () {
    this.getMovList()
    this.bowen()
    method()
  },
  components: {
    fireComponents
  },
  methods: {
    async getMovList () {
      var url = 'api/scanfilemp4.php'
      await this.axios.get(url).then((res) => {
        this.movList2 = res.data
        var newList = this.movList2.slice(0, 5)
        for (var i = 0; i < newList.length; i++) {
          this.movList[0].movName.push(
            {
              name: newList[i],
              pic: newList[i] + '.jpg'
            }
          )
        }
      })
    },

    clickMenuLi (index) {
      var name = -1
      var Mirrorimag = -1
      switch (index) {
        case 0:
          name = -90
          break
        case 1:
          name = 90
          break
        case 2:
          Mirrorimag = 1
          break
        case 3:
          Mirrorimag = 2
          break
      }
      var data = new FormData()
      data.append('name', name)
      data.append('Mirrorimag', Mirrorimag)
      this.axios.post('api/videorotate.php', data).then((res) => {
        if (res.data.issuccess === true) {
          alert('操作成功')
        } else {
          alert('操作失败')
        }
      }).catch((res) => {
        alert('请求失败')
      })
    },
    playVideo () {
      console.log('播放video')
    },
    uploadMov (item, index) {
      this.isClick = false
      var fatherimg = this.movPath + item + '.jpg'
      this.fatherImgSrc = fatherimg
      var url = 'api/server.php'
      var gender = 2
      var data = new FormData()
      data.append('name', 'http://192.168.1.122:87/' + item)
      data.append('gender', gender)
      this.axios.post(url, data).then((res) => {
        if (res.data.issuccess === true) {
          this.timerName = setInterval(() => {
            this.$refs.childName.init()
            window.clearInterval(this.timerName)
            this.timerName = null
            this.isClick = true
          }, 100)
        } else {
          alert('视频上传失败')
        }
      }).catch((res) => {
        alert('请求失败')
      })
    },
    bowen () {
      var that = this
      window.onscroll = function () {
        // 变量scrollTop是滚动条滚动时，距离顶部的距离
        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop
        // 变量windowHeight是可视区的高度
        var windowHeight = document.documentElement.clientHeight || document.body.clientHeight
        // 变量scrollHeight是滚动条的总高度
        var scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight
        // 滚动条到底部的条件
        if (scrollTop + windowHeight + 200 >= scrollHeight) {
          // setTimeout(that.loading2 = true, 50000)
          that.sleep(1000)
          // 写后台加载数据的函数
          console.log('浏览器触底！！！     距顶部' + scrollTop + '可视区高度' + windowHeight + '滚动条总高度' + scrollHeight)
          var index = that.movList[0].movName.length
          var newList = that.movList2.slice(index, index + 3)
          for (var i = 0; i < newList.length; i++) {
            that.movList[0].movName.push(
              {
                name: newList[i],
                pic: newList[i] + '.jpg'
              }
            )
          }
          if (that.movList2.length === that.movList[0].movName.length) {
            that.loading2 = false
          }
        }
        // that.initialize()
      }
    },
    sleep (numberMillis) {
      this.loading2 = true
      var now = new Date()
      var exitTime = now.getTime() + numberMillis
      while (true) {
        now = new Date()
        if (now.getTime() > exitTime) { return }
      }
    }
  }
}
</script>

<style scoped>
.netImg {
  /* height: 3008px; */
  width: 750px;
  background-color: #f5f5f5;
  position: relative;
}
.divFooter {
  position: fixed;
  width: 100%;
  bottom: 0;
  text-align: center;
}
.footer {
  left: 0;
  bottom: 0;
  clear: both;
  display: block;
  text-align: center;
  width: 100%;
}
#menu li {
  text-decoration: none;
  list-style: none;
  display: inline;
  padding-right: 5px;
  border: 1px solid #ffffff;
  background-color: #0775fd;
  color: #ffffff;
  padding: 10px;
}
.loadingTxt {
  height: 200px;
  width: 100%;
  background-color: #ffffff;
}
</style>
